<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/icon.css">
    <script type="text/javascript" src="../public/jeasyui/jquery.min.js"></script>

    <script type="text/javascript" src="../public/jeasyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../public/js/jquery.serializejson.min.js"></script>

<style>
#display-none+span{
    display: none;
}
</style>


</head>
<body>

<div class="easyui-layout" data-options="fit:true" style="border:0">

    <div data-options="region:'west',split:true" title="新闻列表" style="width:250px;border:0">

        <div class="easyui-accordion" data-options="fit:true">
            <div id="tt"></div>

        </div>

    </div>
    <div data-options="region:'center',title:'新闻详情',iconCls:'icon-ok'" style="border:0">
        <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:400px;padding:10px">

            <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <input class="easyui-textbox" name="_id" style="display: none;" id="display-none">
                <div style="margin-bottom:20px;margin-top:10px">
                    <input class="easyui-datetimebox" label="发布时间:" name="time" labelPosition="right"  style="width:100%;">
                </div>
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'新闻作者:',required:true">
                </div>
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'新闻标题:',required:true,required:true">
                </div>
                <div style="margin-bottom:20px">
                    <input class="easyui-textbox" name="content" style="width:100%;height:60px" data-options="label:'新闻内容:',multiline:true">
                </div>

            </form>
            <div style="text-align:center;padding:5px 0;">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
            </div>


        </div>
        <table id="dg">
                <div id="ft" style="padding:2px 5px;">
                        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="add">添加新闻</a>
                        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="remove">删除选中新闻</a>
                        <input class="easyui-searchbox" style="width:200px" data-options="prompt:'标题查找新闻'" id="findNews">
                    </div>
        </table>
    </div>
</div>

</body>
</html>

<script>
$('#add').click(function(){
    $('#dlg').dialog('open')
})

$('#remove').click(function(){
    removers();
})

$('#findNews').searchbox({
    searcher:function(value){
        $('#dg').datagrid({
        url:`http://localhost:3000/news/title/${value}`,
        columns:[[
            {field:'ck',checkbox:true},
            {field:'time',title:'发布时间',width:150,align:'center'},
            {field:'title',title:'新闻标题',width:150,align:'center'},
            {field:'name',title:'新闻作者',width:150,align:'center'},
            {field:'reply',title:'评论数',width:150,align:'right'},
            {field:'_id',title:'操作',width:150,align:'center',formatter:function(value,row,index){
                return `<a href="javascript:;" onclick="searchcomment('${value}')">查看评论</a> <a href="javascript:void(0)" onclick="upData('${value}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`;
            }}
        ]]
    });
    }
});

$('#dg').datagrid({
    url:'http://localhost:3000/news/list',
    columns:[[
        {field:'ck',checkbox:true},
        {field:'time',title:'发布时间',width:150,align:'center'},
        {field:'title',title:'新闻标题',width:150,align:'center'},
        {field:'name',title:'新闻作者',width:150,align:'center'},
        { field: 'reply', title: '评论数', width: 100 },
        {field:'_id',title:'操作',width:150,align:'center',formatter:function(value,row,index){
            return `<a href="javascript:;" onclick="searchcomment('${value}')">查看评论</a> <a href="javascript:void(0)" onclick="upData('${value}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`;
            }}
    ]]
});

function removers(){
    $.messager.confirm('确认对话框','你确认删除该条新闻吗?',function(r){
        if (r){
            var dgSelections=$("#dg").datagrid('getSelections');
            var ids =[];
            for(var i=0;i<dgSelections.length;i++){
                ids.push(dgSelections[i]._id);
            }
            $.ajax({
                url:'http://localhost:3000/news/removes',
                type:'post',
                data:{
                    ids:ids.toString()
                }
            }).then(res=>{
                $('#dg').datagrid('reload');
            })
        }
    });

}

var dataId=null;
$("#tt").tree({
    url:'http://localhost:3000/cate/list/news',
    method:'post',
    onClick: function(node){
        dataId=node._id;
        $('#dg').datagrid({
        url:`http://localhost:3000/news/list/${node._id}`,
        columns:[[
            {field:'ck',checkbox:true},
            {field:'time',title:'发布时间',width:150,align:'center'},
            {field:'title',title:'新闻标题',width:150,align:'center'},
            {field:'name',title:'新闻作者',width:150,align:'center'},
            {field:'reply',title:'评论数',width:150,align:'right'},
            {field:'_id',title:'操作',width:150,align:'center',formatter:function(value,row,index){
                
                return `<a href="javascript:;" onclick="searchcomment('${value}')">查看评论</a> <a href="javascript:void(0)" onclick="upData('${value}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`;
            }}
        ]]
    });

	}
})

function deleteData(id){
    $.messager.confirm('确认对话框','你确认删除该条新闻吗?',function(r){
        if (r){
           $.ajax({
               url:`http://localhost:3000/news/${id}`,
               type:'delete'
           }).done(res=>{
            $('#dg').datagrid('reload')
           })
        }
    });
}

function upData(id){
    $.ajax({
        url:`http://localhost:3000/news/${id}`,
        type:'get'
    }).then(res=>{
        $('#dlg').dialog('open');
        $('#ff').form('load',res);
    })
}
function searchcomment(id){
    location.href="http://localhost:5000/views/comment?newsid="+id
    // alert(11111)
}

function submitForm(){
            $('#ff').form('submit',{
                onSubmit:function(){
                    if($(this).form('enableValidation').form('validate')){
                        var formData=$("#ff").serializeJSON();
                        if(dataId!=null){
                            formData.cateId=dataId
                        };
                        if(formData._id){
                            $.ajax({
                            url:`http://localhost:3000/news/${formData._id}`,
                            type:'put',
                            data:formData
                            }).done(res=>{
                                $('#dlg').dialog('close');
                                $('#dg').datagrid('reload');
                                clearForm()
                            })
                        }else{
                            delete formData._id;
                            $.ajax({
                            url:'http://localhost:3000/news',
                            type:'post',
                            data:formData
                            }).done(res=>{
                                $('#dlg').dialog('close');
                                $('#dg').datagrid('reload');
                                clearForm()
                            })
                        }

                    }
                }
            });
        }
        function clearForm(){
            $('#ff').form('clear');
            $('#dlg').dialog('close');
        }

</script>